(function () {
  // 公共区域加载
  "use strict";
  $(".public-header").load("./public.html .public-header", function () {
    if (getCookie("code") == 2) {
      $(".username").html(getCookie("username") + "，你好！");
      $(".login").html('<a href="./personal_center.html">个人中心</a>');
      $(".register").html("退出").on("click", () => {removeCookie("username")
          removeCookie("code")
          location.reload ();
        });
    }
    function setCookie(key, val, ops = {}) {
      let e = "";
      if (ops.expires) {
        const d = new Date();
        d.setDate(d.getDate() + ops.expires);
        e = ";expires=" + d;
      }
      let p = ops.path ? ";path=" + ops.path : "";
      document.cookie = `${key}=${val}${e}${p}`;
    }
    function removeCookie(key, ops = {}) {
      ops.expires = -1;
      setCookie(key, null, ops);
    }
    function getCookie(key) {
      const str = document.cookie;
      const arr = str.split("; ");
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].split("=")[0] === key) {
          return arr[i].split("=")[1];
        }
      }
      return null;
    }
    let flag = 0;
    $("#right-sider")
      .find(".car")
      .on("click", () => {
        if (flag == 0) {
          $("#right-sider").animate({ right: 0 });
          flag = 1;
        } else {
          $("#right-sider").animate({ right: -276 });
          flag = 0;
        }
      });
    $(window).on("resize load", () => {
      $("#right-sider").css("height", document.documentElement.clientHeight);
    });
    class Jumpout {
      constructor(obj) {
        this.ele = obj.ele;
        this.width = obj.width;
        this.height = obj.height;
        this.pos = obj.pos;
        this.type = obj.type;
        this.tarEle = obj.tarEle;
        this.addEvent();
      }
      addEvent() {
        this.tarEle.style.cssText = `width:${this.width}px;height:${this.height}px;${this.pos}:0;`;
        const that = this;
        let flag = 0;
        this.ele.addEventListener(this.type, () => {
          if (that.type == "click") {
            if (flag === 0) {
              that.ele.style.cssText =
                "border:1px solid lightgreen;border-bottom: none;border-top: none;background-color:white;line-height:31px;margin-top:0";
              that.tarEle.style.display = "block";
              flag = 1;
            } else {
              that.ele.style.cssText = "";
              that.tarEle.style.display = "none";
              flag = 0;
            }
          } else {
            that.ele.style.cssText =
              "border:1px solid lightgreen;border-bottom: none;box-sizing:border-box;background-color:white;line-height:31px;margin-top:0";
            that.tarEle.style.display = "block";
            const inthat = that;
            that.ele.addEventListener("mouseleave", () => {
              inthat.ele.style.cssText = "";
              inthat.tarEle.style.display = "none";
            });
          }
        });
      }
    }
    // 弹出框(地区)
    new Jumpout({
      ele: document.querySelector(".changeposition"),
      tarEle: document.querySelectorAll(".jumplist")[0],
      width: 400,
      height: 400,
      pos: "left",
      type: "click",
    });
    new Jumpout({
      ele: document.querySelector(".user"),
      tarEle: document.querySelectorAll(".jumplist")[1],
      width: 200,
      height: 260,
      pos: "left",
      type: "mouseover",
    });
    new Jumpout({
      ele: document.querySelector(".client"),
      tarEle: document.querySelectorAll(".jumplist")[2],
      width: 100,
      height: 60,
      pos: "left",
      type: "mouseover",
    });
    new Jumpout({
      ele: document.querySelector(".shopping-car"),
      tarEle: document.querySelectorAll(".jumplist")[3],
      width: 300,
      height: 100,
      pos: "right",
      type: "mouseover",
    });

    class Search {
      constructor(ops) {
        this.txt = ops.txt;
        this.list = ops.list;
        this.url = ops.url;
        this.addEvent();
      }
      addEvent() {
        const that = this;
        $(that.txt).on("input", function () {
          if (this.value === "") return;
          that.v = this.value;
          that.load();
        });
      }
      load() {
        request({
          url: this.url,
          type: "get",
          data: {
            code: "utf-8",
            q: this.v,
          },
          success: (res) => {
            this.res = JSON.parse(res).result;
            this.render();
          },
        });
      }
      render() {
        let str = "";
        for (var i = 0; i < this.res.length; i++) {
          str += `<li><a href="search.html">${this.res[i][0]}</li>`;
        }
        if (this.v != "") {
          this.list.style.display = "block";
          this.list.innerHTML = str;
        } else {
          this.list.style.display = "none";
        }
      }
    }
    new Search({
      txt: document.querySelector("#txt"),
      list: document.querySelector(".goodslist"),
      url: "/suggest.taobao.com/sug",
    });
  });
  $(".public-footer").load("./public.html .public-footer");
})();
